<template>
  <div style="height: 800px; margin: 2vw">
    <div class="main-header">
      标题:
      <el-input
          type="text"
          placeholder="请输入内容"
          style="margin-right: 2vw; margin-left: 1vw;width: 200px;"
          v-model="queryTitle"
      />
      频道:
      <el-select v-model="value" clearable placeholder="全部频道" style="margin-right: 2vw; margin-left: 1vw;width: 110px" @change="changeSelect()">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      作者昵称:
      <el-input
          type="text"
          placeholder="请输入内容"
          style="margin-right: 5vw; margin-left: 1vw;width: 200px;"
          v-model="queryName"
      />
      作者账号:
      <el-input
          type="text"
          placeholder="请输入内容"
          style="margin-right: 5vw; margin-left: 1vw;width: 200px;"
          v-model="queryAccount"
      />
      <el-button type="primary" @click="check">查询</el-button>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.num }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标题" min-width="100" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="作者账号" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.userAccount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="作者昵称" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ Number(scope.row.status) === 0 ? " 未发布" : "已发布" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" min-width="150" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="修改时间" min-width="150" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.updateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="100" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="openNote(scope.row.id)">详情</el-button>
            <el-button type="text" size="small" @click="deleteNote(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="笔记详情" :visible.sync="dialogFormVisible">
        <div style="display: flex;flex-wrap: wrap;margin-bottom: 20px">
          <span style="margin-right: 5vw;line-height: 100px">背景图片</span>
          <div class="upload" v-for="item in this.form.imgs">
            <img :src="item" style="width: 100px;height: 100px;margin-right: 10px;display: inline-block" alt=""/>
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 50%;margin-right: 10px">
            <div style="margin-bottom: 1vh">
              <span>频道:</span>
              <span>{{ this.form.channelName }}</span>
            </div>
            <div style="margin-bottom: 1vh">
              <span>标题:</span>
              <span style="overflow: hidden;width: 50px">{{ this.form.title }}</span>
            </div>
            <div style="margin-bottom: 1vh">
              <span>作者昵称:</span>
              <span>{{ this.form.userName }}</span>
            </div>
            <div style="margin-bottom: 1vh">
              <span>作者账号:</span>
              <span>{{ this.form.userAccount }}</span>
            </div>
            <div style="margin-bottom: 1vh">
              <span>创建时间:</span>
              <span>{{ this.form.createTime }}</span>
            </div>
            <div style="margin-bottom: 1vh">
              <span>修改时间:</span>
              <span>{{ this.form.updateTime }}</span>
            </div>
            <div>
              <span>正文:</span>
              <el-card style="height: 30vh">
                <p>{{ this.form.text }}</p>
              </el-card>
            </div>
          </div>
          <div style="width: 50%;">
            <span>评论列表:</span>
            <el-card style="height: 50vh">
              <div v-for="item in this.discuss" style="margin-bottom: 15px">
                <p>{{ item.userName }} {{ item.userAccount }}</p>
                <span>{{ item.remark }}</span>
                <i class="el-icon-delete" style="float: right" @click="deleteDiscuss(item.id)"></i>
              </div>
              <div v-if="this.discussPage.total>5" style="float: right; margin-top: 10vh">
                <el-pagination
                    background
                    :page-size="discussPage.size"
                    layout="prev, pager, next"
                    :total="discussPage.total"
                    @current-change="upDiscussPage"
                >
                </el-pagination>
              </div>
            </el-card>
          </div>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">确定</el-button>
        </div>
      </el-dialog>
    </div>
    <div style="float: right; margin-top: 10vh">
      <el-pagination
          background
          :page-size="size"
          layout="sizes, prev, pager, next,jumper"
          :page-sizes="[10]"
          :total="total"
          @current-change="upPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      discussPage: {
        current: 1,
        pages: 0,
        total: 0,
        size: 5,
      },
      discuss: [
        {
          id: "",
          remark: "",
          userAccount: "",
          userName: "",
        }
      ],
      form: [
        {
          channelId: "",
          channelName: "",
          createTime: "",
          imgs: [],
          text: "",
          id: "",
          title: "",
          updateTime: "",
          userAccount: "",
          userName: "",
        },
      ],
      dialogFormVisible: false,
      options: [],
      value: "",
      queryTitle: '',
      queryChannel: "",
      queryName: "",
      queryAccount: "",
      tableData: [
        {
          createTime: '',
          id: "",
          status: "",
          title: "",
          updateTime: "",
          userAccount: "",
          userName: "",
        },
      ],
      size: 10,
      current: 1,
      total: 0,
      pages: 0,
    }
  },
  methods: {
    //删除评论
    deleteDiscuss(id){
      let url = `/api/lzs/note/remark/delete?id=${id}`;
      this.http.get(url).then(()=>{
        this.$message.success("删除成功");
        this.getDiscuss();
      })
    },
    //更新评论页码
    upDiscussPage(val) {
      this.discussPage.current = val;
      this.getDiscuss();
    },
    //评论详情
    getDiscuss() {
      let url = "/api/lzs/note/remark/page";
      let params = {
        currentPage: this.discussPage.current,
        noteId: this.form.id,
        pageSize: this.discussPage.size
      }
      this.http.post(url, params).then((res) => {
        this.discuss = res.data.data.records;
        this.discussPage.total = res.data.data.total;
        this.discussPage.pages = res.data.data.pages;
        this.discussPage.size = res.data.data.size;
        this.discussPage.current = res.data.data.current;
      })
    },
    //笔记详情
    openNote(id) {
      let url = `/api/lzs/note/detail?id=${id}`;
      this.http.get(url).then((res) => {
        this.form.channelName = res.data.data.channelName;
        this.form.createTime = res.data.data.createTime;
        this.form.imgs = res.data.data.imgs;
        this.form.text = res.data.data.text;
        this.form.title = res.data.data.title;
        this.form.updateTime = res.data.data.updateTime;
        this.form.userName = res.data.data.userName;
        this.form.userAccount = res.data.data.userAccount;
        this.form.id = res.data.data.id;
        this.getDiscuss();
        this.dialogFormVisible = true;
      })
    },
    //删除笔记
    deleteNote(id) {
      let url = `/api/lzs/note/delete?id=${id}`;
      this.http.get(url).then((res) => {
        this.$message.success(res.message);
        this.$router.go(0);
      })
    },
    //更新页码
    upPage(val) {
      this.current = val;
      this.check();
    },
    //查询笔记
    check() {
      let url = "/api/lzs/note/page";
      let params = {
        channelId: this.queryChannel,
        currentPage: this.current,
        pageSize: this.size,
        title: this.queryTitle,
        userAccount: this.queryAccount,
        userName: this.queryName
      }
      this.http.post(url, params).then((res) => {
        let data = res.data.data;
        this.total = data.total;
        this.pages = data.pages;
        this.size = data.size;
        this.current = data.current;
        this.tableData = [];
        for (let i in data.records) {
          let temp = {
            id: data.records[i].id,
            num: (Number(this.current) - 1) * Number(this.size) + 1 + Number(i),
            userName: data.records[i].userName,
            userAccount: data.records[i].userAccount,
            createTime: data.records[i].createTime,
            updateTime: data.records[i].updateTime,
            status: data.records[i].status.toString(),
            title: data.records[i].title,
          };
          this.tableData.push(temp);
        }
      })
    },
    //选择频道
    changeSelect() {
      this.queryChannel = this.value
    },
    //获取频道
    getChannel() {
      this.http.get("/api/lzs/channel/list").then((res) => {
        for (let i in res.data.data) {
          let temp = {
            value: res.data.data[i].id,
            label: res.data.data[i].name
          }
          this.options.push(temp);
        }
      })
    },
  },
  mounted() {
    this.getChannel();
    this.check();
  },
}
</script>

<style lang="scss" scoped>
.main-header {
  margin-bottom: 1vh;
}
</style>